<template>
	<view class="loginPage flex" :style="{ '--fss': app.theme.fss() }">
		<common-header title="" background="rgba(0,0,0,)" />
		<view class="logo flex">
			<view class="logo_lite flex">
				<image :src="app.util.getAppInfoDesc().logo" mode="aspectFill"></image>
			</view>
			<image :src="app.util.getAppInfoDesc().loginDesc" class="login_text" mode="widthFix"></image>
		</view>
		<view class="loginCenter"></view>
		<view class="btnView">
			<view class="item flex" @tap="itemTap('weixin')">
				<image src="/static/img/login_wechat.png" mode="aspectFill"></image>
				<text>微信登录</text>
			</view>
			<view class="item flex" @tap="itemTap('qq')">
				<image src="/static/img/login_qq.png" mode="aspectFill"></image>
				<text>QQ登录</text>
			</view>
		</view>
		<view class="badge flex">
			<view class="item flex" @tap="itemTap('mobile')">
				<text class="iconfont icon-shouji1" style="font-size: calc(34rpx * var(--fss));"></text>
			</view>
			<template v-if="app.config.osName === 1">
				<view class="item flex" @tap="itemTap('apple')">
					<text class="iconfont icon-pingguo" style="font-size: calc(34rpx * var(--fss));margin-top:-5rpx;"></text>
				</view>
				<view class="item flex" @tap="itemTap('anonymous')">
					<text class="iconfont icon-weibiaoti1" style="font-size: calc(40rpx * var(--fss));"></text>
					<text class="text">匿名</text>
				</view>
			</template>
		</view>
		<view class="login_agreen flex" @tap="iAgreen = !iAgreen">
			<radio :checked="iAgreen" style="transform:scale(0.7);margin-right:3rpx;" color="#39aa66" />
			<view class="text">
				我已阅读并同意
				<text @tap.stop="app.util.openUserPrivacy('user')">用户协议</text>
				与
				<text @tap.stop="app.util.openUserPrivacy('privacy')">隐私政策</text>
			</view>
		</view>
		<footer-bar></footer-bar>
	</view>
</template>

<script setup>
	import { ref, onMounted, inject } from "vue";
	const app = inject('app');
	
	/* 变量区域 */
	// 显示状态
	const iAgreen = ref(true);
	
	/* 方法区域 */
	function itemTap(type){
		app.util.openUrl({ url: type === 'mobile' ? '/pages/user/mobileLogin' : '/pages/user/mobileBind' })
	}
</script>

<style lang="scss" scoped>
	.loginPage{
		height: 100vh;
		width: 100vw;
		padding: 0 30rpx;
		overflow: hidden;
		flex-direction: column;
		background: url("/static/img/loginBackground.png")no-repeat center top;
		background-size: contain;
		background-color: #11121b;
		.logo{
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding-top: 150rpx;
			.logo_lite{
				// background-image: linear-gradient(0deg,#fff,#f3f5f8);
				box-shadow: 8px 8px 20px 0 rgba(55,99,170,.1);
				border: 8rpx solid #fff;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				image{
					width: 205rpx;
					height: 205rpx;
					border-radius: 50%;
				}
			}
			.login_text{
				display: block;
				margin-top: 45rpx;
				width: 440rpx;
			}
		}
		.loginCenter{
			flex:1;
			height:0;
		}
		.btnView{
			width:85%;
			margin:60rpx auto 0 auto;
			.item{
				flex-direction: row;
				justify-content: center;
				align-items: center;
				line-height: 100rpx;
				border-radius: 60rpx;
				margin-bottom: 44rpx;
				overflow: hidden;
				&:active{
					opacity: 0.8;
				}
				&:nth-child(1){
					background: #FFF;
					text{
						color:#303241;
					}
				}
				&:nth-child(2){
					background: rgba(255,255,255,0.15);
				}
				&:nth-last-child(1){
					margin-bottom: 0;
				}
				image{
					width:35rpx;
					height:35rpx;
					margin-right:16rpx;
				}
				text{
					color:#FFF;
					font-size: calc(29rpx * var(--fss));
					font-weight:bold;
				}
			}
		}
		.badge{
			flex-direction: row;
			align-items: center;
			justify-content: center;
			margin-top:80rpx;
			.item{
				margin-right: 60rpx;
				position:relative;
				width:80rpx;
				height:80rpx;
				border-radius:50%;
				background: rgba(255,255,255,0.15);
				flex-direction: row;
				align-items: center;
				justify-content: center;
				&:nth-last-child(1){
					margin-right:0;
				}
				&:active{
					opacity: 0.8;
				}
				.iconfont{
					color: rgba(255,255,255,0.8);
				}
				.text{
					position:absolute;
					right:-20rpx;
					width:65rpx;
					text-align:center;
					top:-15rpx;
					z-index:1;
					background: rgba(255,255,255,0.1);
					color: rgba(255,255,255,0.8);
					font-size: calc(20rpx * var(--fss));
					font-style: italic;
					line-height: 1.5;
					border-radius:100rpx;
				}
			}
		}
		.login_agreen {
			margin: 100rpx 0 30rpx 0;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			flex-shrink: 0;
			line-height: 42rpx;
			width:100%;
			.text {
				color: rgba(255,255,255,0.5);
				font-size: calc(26rpx * var(--fss));
				text {
					margin:0 8rpx;
					color: #39aa66;
				}
			}
		}
	}
</style>